<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<c:set var="path" value="${pageContext.request.contextPath}"></c:set>
 <link rel="stylesheet" href="../resources/home/css/shop_manager.css" type="text/css" />
 <link rel="stylesheet" href="../resources/home/css/shop_list.css" type="text/css" />
<style type="text/css">
	.view{
		width:600px;
		height:550px;
		float: left;
		border:1px solid;
		background:#fe8502;
	}
	.talk_show{
		width:580px;
		height:420px;
		border:1px solid #666;
		background:#fff;
		margin:10px auto 0;
		overflow:auto;
	}
	.talk_input{
		width:580px;
		height: 200px;
		margin:10px auto 0;
	}
	.form-control{
		width: 400px;
	}
	.whotalk{
		width:80px;
		height:30px;
		float:left;
		outline:none;
	}
	.talk_word{
		width:300px;
		height:26px;
		padding:0px;
		float:left;
		margin-left:10px;
		outline:none;
		text-indent:10px;
	}
	#sub{
		width:56px;
		height:30px;
		float:left;
		margin-left:10px;
	}
	.wangtalk{
		margin:10px;

	}
	.wangtalk span{
		display:inline-block;
		background:#0181cc;
		border-radius:10px;
		color:#fff;
		padding:5px 10px;
	}
	.litalk{
		margin:10px;
		text-align:right;
	}
	.litalk span{
		display:inline-block;
		background:#ef8201;
		border-radius:10px;
		color:#fff;
		padding:5px 10px;
	}

	#clear{
		left: 200px;
		top: 400px;
	}
	#liimg{
		width: 50px;
		height: 50px;
	}
	#wangimg{

		width: 50px;
		height: 50px;
	}
	.op{
		margin-left: 10px;
		height: 50px;
		width: 100px;
	}

</style>
<!-- 我的个人中心 -->
<div class="shop_member_bd clearfix">
	<div class="view">
		<div class="page-header" id="tou">
			客服聊天
		</div>
		<span id="account">${adminname}</span>
		<div class="talk_show" id="showMessage">
			<span id="showDate"></span>
			<%--<div class="litalk" ><img src="${path}/resources/upload/li.png" id="liimg"><span id="asay" >你好！</span></div>--%>
			<%--<div class="wangtalk"><img src="${path}/resources/upload/wang.png" id="wangimg"><span id="bsay">你好！</span></div>--%>
		</div>
		<div class="talk_input"  id="words11">


			<textarea class="form-control" placeholder="发送信息..." id="message"></textarea>
			<input type="button"  value="发送" class="op" id="send"/>


		</div>
	</div>


</div>
</body>
<script>
	var tid = '猿来入此';//全局变量
	var status = 0;//接收消息提醒标志，初始化为0，当收到消息并查看时设置为1
	var adminname = $("#account").text()
	//jquery代码当页面DOM树加载完毕之后触发
	$(function() {
		var websocket;//创建对象，用户连接WebSocket
		if('WebSocket' in window) {
			console.log("此浏览器支持websocket");
			websocket = new WebSocket("ws://127.0.0.1:8080/OnlineShop/websocketDemo/" + adminname);
		} else if('MozWebSocket' in window) {
			alert("此浏览器只支持MozWebSocket");
		} else {
			alert("此浏览器只支持SockJS");
		}
		//连接之后，WebSocket的事件
		websocket.onopen = function(evnt) {
			// $("#msg_a").css("pointer-events","none");  //阻止点击产生效果
			/* var str = location.href;返回当前显示的文档的完整 URL。
            if(str.split('?')[1]){
                tid = str.split('?')[1].split('=')[1];//分割字符串，返回字符串数组
                   $("#tou").html("链接通道成功!开始与用户" + tid + "聊天！")
            } */
		};
		//接收消息的WebSocket事件
		websocket.onmessage = function(evnt) {
			var message = JSON.parse(evnt.data);//将数据解析成JSON形式
			var fromName = message.fromName//对方的账号
			var toName = message.toName;//自己的账号
			var time = new Date(message.date);//对方发送信息时间
			var timeStr = time.toLocaleTimeString();
			if(status == 0){//这个可以不用实现也行
				// alert("收到来自用户 " + fromName + "的消息")
				// var msgg = document.getElementById("img_a");
				// msgg.src = "./imgs/msg2.png";
				// var msg1 = document.getElementById("msg_a");
				// msg1.href = "#?id=" + fromName;
				// $("#msg_a").css("pointer-events","auto");  //阻止a标签点击产生效果
			}
			var text = message.text;//获取对方发送来的文本消息
			str = '<div class="litalk"><img src="${path}/resources/upload/li.png" id="liimg"><span>' + text +'</span></div>' ;
			var Words = document.getElementById("showMessage");
			Words.innerHTML = Words.innerHTML + str;
			scroll();
		};
		//发生错误时，WebSocket的处理事件
		websocket.onerror = function(evnt) {};
		//关闭连接时，WebSocket的处理事件
		websocket.onclose = function(evnt) {
			$("#tou").html("与服务器断开了链接!")
		};
		$(".imga").click(function (){
			status = 1;
		});
		//点击发送按钮，响应。
		$('#send').bind('click', function() {
			var str = location.href;//返回当前显示的文档的完整 URL，里面包含着要发送给谁（对方）的id
			// if(str.split('?')[1])
			// 	tid = str.split('?')[1].split('=')[1];//分割字符串，返回字符串数组
			//把自己的username写进去，然后调用send自定义js函数
			send(adminname);
			$("#tou").html("链接通道成功!开始与用户聊天！")


		});

		function send(name) {
			if(websocket != null) {
				//json字符串
				var msg = {
					fromName: name,//自己的name
					text: document.getElementById("message").value,//自己要发送的消息
					toName: tid,//对方的id
					date: Date.now()
				};

				/*  var message = document.getElementById('message').value; */
				//调用WebSocket的send()方法，发送数据给服务器
				websocket.send(JSON.stringify(msg));//把json数组转换成字符串传到后台
				//定义空字符串
				var str = "";
				var message = document.getElementById("message");
				if(message.value == ""){
					// 消息为空时弹窗
					alert("消息不能为空");
					return;
				}
				str = '<div class="wangtalk"><img src="${path}/resources/upload/wang.png" id="wangimg"><span>' + message.value +'</span></div>';
				var Words = document.getElementById("showMessage");
				Words.innerHTML = Words.innerHTML + str;
				var date = document.getElementById("showDate")
				date.innerHTML = new Date(Date.now()).toLocaleTimeString()
				scroll();
				message.value = ""
			} else {
				alert('未与服务器链接.');
			}
		}

		$("#close").click(function (){
			status = 0;
			var msg = document.getElementById("img_a");
			msg.src = "./imgs/msg1.png";
			location.href = location.href.split('#')[0];//设置当前页面的url href地址
			$("#msg_a").css("pointer-events","none");  //阻止点击产生效果
		});
		//点击退出按钮，退出当前账号，并关闭连接
		$("#exit").click(function (){
			close();
		});
		function close() {
			websocket.close();
		}
	});

</script>

</html>